$_colorStatusOff: #D7D7D7;   
$_colorStatusOk: #00D100;
$_colorStatusError: #ED4A00;
$_colorStatusWarning: #FFBD00;
$_colorBorderStarting: #E2F800;
$_colorBorderNeutral: #777;
$_colorBorderLight: #fff;   

@mixin led-color($color) {
    $_glow_size: 7px;

    &:before {
        background-color: mix($_colorBorderNeutral, $color, 50%);
        background-image: linear-gradient(to bottom, mix($_colorBorderNeutral, $color, 50%) 0%,mix($_colorBorderLight, $color, 50%) 100%);
    }

    &:after {
        background: $color;
        box-shadow: 
            inset 0 (-($-glow-size)) $_glow_size rgba(100,100,100,0.1),
            inset 0 $_glow_size $_glow_size rgba(255,255,255,0.3);
    }
}

span.icon_status {
    $_size: 14px;
    $_inner_size: calc($_size - 2px);
    width: $_size;
    height: $_size;
    display: inline-block;
    position: relative;
    margin-top: 3px;
    
    &:before {
        // background as gradient border
        content: " ";
        position: absolute;
        top: 0px;
        left: 0px;
        border-radius: 50%;
        width: $_size;
        height: $_size;
        background-color: #ddd;
        z-index: 0;
    }
    &:after {
        // colored status
        content: " ";
        position: absolute;
        top: 1px;
        left: 1px;
        border-radius: 50%;
        width: $_inner_size;
        height: $_inner_size;
        background-color: $backgroundColorLight;
        z-index: 1;
    }
    
    &.icon_status_running,
    &.icon_status_ok {
        @include led-color($_colorStatusOk);
    }
    
    &.icon_status_error {
        @include led-color($_colorStatusError);
    }
    
    &.icon_status_warning,
    &.icon_status_retrying {
        @include led-color($_colorStatusWarning);
    }
    
    &.icon_status_starting {
        @include led-color($_colorBorderStarting);
    }
}